<template>
  <view class="viewport">
    <fui-nav-bar
      isOccupy
      isFixed
      background="#0052D9"
      title="派工工单详情"
      color="#fff"
      @leftClick="leftClick"
    >
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="">
        <fui-tabs
          @change="change"
          :tabs="tabs"
          isDot
          scroll
          alignLeft
          :short="false"
        ></fui-tabs>
      </view>
      <view class="scroll-view">
        <!-- <auditCheck v-if="checkIndex === 0"></auditCheck> -->
        <faultMessage
          v-if="checkIndex === 0"
          :detail="orderDetail"
        ></faultMessage>
        <information
          v-if="checkIndex === 1"
          :detail="orderDetail"
        ></information>
        <service v-if="checkIndex === 2" :detail="orderDetail"></service>
      </view>
    </view>
    <view v-if="orderDetail.status === 5" class="footer">
      <view class="recall" @tap="goToConfirm">确认派工</view>
    </view>
  </view>
</template>

<script setup>
import information from "./components/information.vue";
import faultMessage from "./components/faultMessage.vue";
import auditCheck from "./components/auditCheck.vue";
import service from "./components/service.vue";
import { ref } from "vue";
import { getOrderDetail } from "@/pages/api/subpkg_index/dispatching.js";

const leftClick = () => {
  uni.navigateBack();
};

// 跳转到确认派工页面
const goToConfirm = () => {
  uni.navigateTo({
    url: `/subpkg_index/dispatching/confirm?id=${orderDetail.value?.id}`,
  });
};

const tabs = ref([
  {
    name: "报修信息",
  },
  {
    name: "派工信息",
  },
  {
    name: "执行进度",
  },
]);

const checkIndex = ref(0);
const change = (e) => {
  console.log(e);
  checkIndex.value = e.index;
};

const orderDetail = ref(null);

// 获取页面参数中的id
const getOrderId = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  return currentPage.$page?.fullPath?.split("id=")[1] || "";
};

// 获取工单详情
const getDetail = async () => {
  try {
    const id = getOrderId();
    if (!id) return;
    const res = await getOrderDetail(id);
    if (res.code === 200) {
      orderDetail.value = res.data;
    }
  } catch (error) {
    console.error("获取工单详情失败", error);
  }
};

// 页面加载时获取详情
getDetail();
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.colorGray {
  color: #cbb8b8 !important;
}

.port {
  .title {
    border-bottom: 1px solid #ccc;
    height: 70rpx;
    display: flex;
    align-items: center;
  }
  .li {
    padding: 20rpx;
    display: flex;
    align-items: center;
    height: 100rpx;
    // padding-left: 40rpx;
    .right {
      margin-left: 30rpx;
      color: #cbb8b8;
    }
  }
  .item {
    // height: 100rpx;
    padding-left: 40rpx;
    padding-bottom: 30rpx;
    .left {
      height: 70rpx;
    }
    .described {
      padding-right: 50rpx;
    }
  }
}
.warp {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .nav {
    background-color: #fff;
    .top {
      display: flex;

      .img {
        width: 180rpx;
        height: 190rpx;
      }
      .nav_title {
        // padding: 20rpx;
        padding-left: 20rpx;
        .h1 {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 60rpx;
          height: 60rpx;
        }
        .h2 {
          line-height: 44rpx;
        }
      }
    }
    .nav_bottom {
      margin-top: 10rpx;
      .nav_warp {
        padding: 10rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .scroll-view {
    flex: 1;
    // background-color: pink;
    overflow: hidden;
    padding-bottom: 170rpx;
  }
}
.footer {
  // position: fixed;
  // top: 50;
  // button: 20;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 5;
  border-top: 1px solid #ccc;
  height: 150rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .recall {
    background-color: #0052d9;
    width: 90%;
    border: 1px solid #0052d9;
    border-radius: 5rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
  }
}
</style>
